<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper">
      <div class="site-content">
        <div class="brand-info">
          <swiper :options="swiperOption">
            <swiper-slide v-for="item of slideList" :key="item.rotationId" >
              <img :src="item.rotationUrl" width="1000px" height="600px"/>
            </swiper-slide>
          </swiper>
          <div class="binner-btn-container">
            <div class="binner-btn-box">
              <div class="swiper-button swiper-button-next"></div>
              <div class="swiper-button swiper-button-prev"></div>
            </div>
          </div>
<!--          <h2 class="brand-info__text">renren-fast-vue</h2>-->
<!--          <p class="brand-info__intro">renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案。</p>-->
<!--&lt;!&ndash;          <button @click="saveLogininfo">点击获取数据</button>&ndash;&gt;-->
        </div>
        <div class="login-main">
          <h3 class="login-title">管理员登录
            <a  style="text-align: right" @click="$router.push({ name: 'register' })">注册</a>
          </h3>

          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
            <el-form-item prop="userName">
              <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" placeholder="验证码">
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="captchaPath" @click="getCaptcha()" alt="">
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getUUID } from '@/utils'
  export default {
    props: ["slideList"],
    data () {
      return {
        slideList:{},
        swiperOption: {
          autoplay: true,
          observer: true,
          observeParents: true,
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
          }
        },
        dataForm: {
          userName: '',
          password: '',
          uuid: '',
          captcha: ''
        },
        dataRule: {
          userName: [
            { required: true, message: '帐号不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ],
          captcha: [
            { required: true, message: '验证码不能为空', trigger: 'blur' }
          ]
        },
        captchaPath: ''
      }
    },
    created () {
      this.getCaptcha();
        this.saveLogininfo();
        this.getSideList();
    },
    methods: {
      // 提交表单
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/sys/login'),
              method: 'post',
              data: this.$http.adornData({
                'username': this.dataForm.userName,
                'password': this.dataForm.password,
                'uuid': this.dataForm.uuid,
                'captcha': this.dataForm.captcha
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$cookie.set('token', data.token)
                this.$message.success("登陆成功！")
                this.$router.replace({ name: 'home' })
              } else {
                this.getCaptcha()
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      // 获取验证码
      getCaptcha () {
        this.dataForm.uuid = getUUID()
        this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
      },
      saveLogininfo () {
        // this.$http.adornUrl('/generator/syslogininfor/saveLogininfo')
        this.$http({
          url: this.$http.adornUrl('/generator/syslogininfor/saveLogininfo'),
          method: 'get',
        });
      },
      getSideList () {
        // 获取数据列表
          this.$http({
            url: this.$http.adornUrl('/generator/webrotation/getSideList'),
            method: 'get',
            // params: this.$http.adornParams({
            //   'page': 1,
            //   'limit': 10,
            //   // 'key': this.dataForm.key
            // })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.slideList = data.sideList
            } else {
              this.slideList = null;

            }

          })
      }

    },


  }
</script>

<style lang="scss">
.site-wrapper.site-page--login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(38, 50, 56, .6);
  overflow: hidden;
  &:before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(~@/assets/img/login_bg.jpg);
    background-size: cover;
  }
  .site-content__wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
  }
  .site-content {
    min-height: 100%;
    padding: 30px 500px 30px 30px;
  }
  //.brand-info {
  //  margin: 220px 100px 0 90px;
  //  color: #fff;
  //}
  //.brand-info__text {
  //  margin:  0 0 22px 0;
  //  font-size: 48px;
  //  font-weight: 400;
  //  text-transform : uppercase;
  //}
  //.brand-info__intro {
  //  margin: 10px 0;
  //  font-size: 16px;
  //  line-height: 1.58;
  //  opacity: .6;
  //}
  .login-main {
    position: absolute;
    top: 0;
    right: 0;
    padding: 150px 60px 180px;
    width: 470px;
    min-height: 100%;
    background-color: #fff;
  }
  .login-title {
    font-size: 16px;
  }
  .login-captcha {
    overflow: hidden;
    > img {
      width: 100%;
      cursor: pointer;
    }
  }
  .login-btn-submit {
    width: 100%;
    margin-top: 38px;
  }
}

//轮播图样式
.brand-info  {
  position: relative;
  max-width: 1620px;
  max-height: 800px;
  overflow: hidden;
  margin: auto;
  text-align: center;
  //img {
  //  width: 70%;
  //}
}
.binner-btn-container {
  position: absolute;
  bottom: 10%;
  left: 50%;
  z-index: 999;
  width: 100%;
  max-width: 1140px;
  transform: translateX(-50%);
}
.binner-btn-box {
  width: 100px;
  position: relative;
  margin: auto;
  right: 5%;
  .swiper-button {
    background-image: url("~@/assets/img/binnerBtn.png");
    width: 34px;
    height: 34px;
    padding: 10px;
    background-size: cover;
    outline: none !important;
    &.swiper-button-next {
      transform: rotateZ(180deg);
    }
  }
}
//.text-box {
//  position: absolute;
//  top: 50%;
//  left: 50%;
//  z-index: 999;
//  width: 100%;
//  max-width: 1140px;
//  transform: translate(-50%, -50%);
//  color: #fff;
//  cursor: default;
//  .text-b {
//    font-size: 50px;
//    margin-bottom: 20px;
//  }
//}
@media (max-width: 768px) {
  .text-b {
    font-size: 30px !important;
    margin-bottom: 20px;
  }
}
</style>
